<template>
  <div>
    <div class="pie-box">
      <div>
        <div class="flex items-center justify-between py-4">
          <p class="ml-5 font-semibold">安全事件分布图</p>
          <el-select class="mr-4 absolute top-11 z-50" v-model="attackTypeTime" style="width:110px" @change="getStatistics">
            <el-option label="1小时内" value="1h">1小时内</el-option>
            <el-option label="一天内" value="1d">一天内</el-option>
            <el-option label="一周内" value="1w">一周内</el-option>
            <el-option label="一个月内" value="1M">一个月内</el-option>
            <el-option label="一年内" value="1y">一年内</el-option>
          </el-select>
        </div>
        <HETEcharts :id="'attackType'" :fullOptions="statisticsOption" :height="'500px'"></HETEcharts>
      </div>
      <div class="mt-5">
        <div class="flex items-center justify-between py-4">
          <p class="ml-5 font-semibold">安全事件趋势图</p>
          <el-select class="mr-4 absolute top-11 z-50" v-model="eventLevelTime" style="width:110px" @change="getTrend">
            <el-option label="1小时内" value="1h">1小时内</el-option>
            <el-option label="一天内" value="1d">一天内</el-option>
            <el-option label="一周内" value="1w">一周内</el-option>
            <el-option label="一个月内" value="1M">一个月内</el-option>
            <el-option label="一年内" value="1y">一年内</el-option>
          </el-select>
        </div>
        <HETEcharts :id="'eventLevel'" :fullOptions="trendOption" :height="'500px'"></HETEcharts>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import moment from "moment";
import {req_getStatistics, req_getTrend} from "~/utils/axios/setting.js";

const attackTypeTime = ref('1d')
const eventLevelTime = ref('1d')

// 时间选项提取时间函数
const getSelectTime = (timeString) => {
  return moment().subtract(parseFloat(timeString), timeString.substring(timeString.length, timeString.length - 1)).format("YYYY-MM-DD HH:mm:ss")
}

const getFrequency = (timeString) => {
  if (timeString == "1h") {
    return 1;
  } else if (timeString == "1d") {
    return 2;
  } else if (timeString == "1w") {
    return 3;
  } else if (timeString == "1M") {
    return 4;
  } else if (timeString == "1y") {
    return 5;
  }
}

const statisticsObj = [
  {value: '10', text: '进程执行'},
  {value: '11', text: "进程拦截"},
  {value: '20', text: "USB接入"},
  {value: '21', text: "USB拦截"},
  {value: '30', text: "网卡发现"},
  {value: '31', text: "网卡拦截"},
  {value: '40', text: "非法外联检测"},
  {value: '41', text: "非法外联拦截"},
  {value: '50', text: "BAT执行"},
  {value: '51', text: "BAT阻止"},
  {value: '60', text: "VBS执行"},
  {value: '61', text: "VBS阻止"},
  {value: '80', text: "文件放行"},
  {value: '81', text: "文件修改"},
  {value: '82', text: "文件删除拦截"},
  {value: '83', text: "文件修改拦截"},
  {value: '90', text: "网络接入"},
  {value: '91', text: "网络拦截"},
  {value: '100', text: "CPL执行"},
  {value: '101', text: "CPL阻止"},
  {value: '110', text: "CMD执行"},
  {value: '111', text: "CMD阻止"},
  {value: '120', text: "MSC执行"},
  {value: '121', text: "MSC阻止"},
  {value: '130', text: "MSI执行"},
  {value: '131', text: "MSI阻止"},
  {value: '140', text: "FON执行"},
  {value: '141', text: "FON阻止"},
  {value: '150', text: "WSF执行"},
  {value: '151', text: "WSF阻止"},
  {value: '160', text: "WSH执行"},
  {value: '161', text: "WSH阻止"},
  {value: '170', text: "REG执行"},
  {value: '171', text: "REG阻止"},
  {value: '180', text: "PS1执行"},
  {value: '181', text: "PS1阻止"},
  {value: '200', text: "控件注册"},
  {value: '201', text: "控件阻止"},
  {value: '202', text: "服务注册"},
  {value: '203', text: "服务阻止"},
/*  {value: '1110', text: "强访问控制"},
  {value: '1111', text: "完整性防护"},*/
]
var statisticsOption = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    formatter: "{b}</br> 安全事件分布 : <b>{c}</b>"
  },
  legend: {
    name: '安全事件分布',
    align: 'auto',
    right: 140,
    itemGap: 10,
    itemWidth: 16,
    itemHeight: 6,
    textStyle:{
      color: 'rgba(0,0,0,0.65)',
      fontSize: 14,
    }
  },
  grid: {
    x: 65,
    x2: 47,
    y: 85,
    y2: 95,
    borderWidth: 0
  },
  xAxis: [{
    type: 'category',
    boundaryGap: true,
    axisLabel: {
      'interval': 0,
      'rotate': -30,
      'fontSize': 13,
      'color': '#888888'
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: true,
      inside: true
    },
    data: statisticsObj.map(item => item.text)
    // data : ['协议分析', '木马攻击', '拒绝服务攻击', 'finger服务攻击', '远程访问攻击','安全扫描', '间谍软件攻击', '恶意攻击', '0-day', '潜在风险', '自定义攻击', '敏感操作', '缓冲溢出攻击', '蠕虫攻击', '目录扫描攻击', 'SQL注入攻击', '跨站脚本攻击', '内容过滤', '爬虫攻击', 'web扫描', '文件识别', '弱口令攻击', '强力攻击']
  }],
  yAxis: [{
    type: 'value',
    axisLabel: {
      showMaxLabel: true //不显示最大刻度线值
    },
    splitArea: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#f0f0f0', // 网格线颜色
        width: 1,         // 网格线宽度
        type: 'solid'     // 网格线类型
      },
      interval: 20         // 设置间距为10
    },
    nameTextStyle: {
      color: ['#333']
    },
    boundaryGap: [0, 0.15]//加上与最大数值的间距
  }],
  series: [{
    name: '安全事件分布',
    type: 'bar',
    itemStyle: {
      label: {show: true},
      color: '#D8CEE4'
    },
    data: [],
  }],

});
// 安全事件类型分布
const getStatistics = () => {
  let statisticsPatam = {
    startTime: getSelectTime(attackTypeTime.value),
    endTime: moment().format("YYYY-MM-DD HH:mm:ss")
  }
  req_getStatistics(statisticsPatam).then(res => {
    let statisticsData = res.data;
    let seriesData = [];
    statisticsObj.map(item => {
      if (Object.keys(statisticsData).includes(item.value)) {
        seriesData.push(statisticsData[item.value])
      } else {
        seriesData.push(0)
      }
    })
    statisticsOption.series[0].data = seriesData;
    console.log(statisticsOption.series[0].data)
    console.log(statisticsOption.xAxis[0].data)
  })
}
var trendOption = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    formatter: "{b}</br> 安全事件趋势 : <b>{c}</b>"
  },
  legend: {
    name: '安全事件趋势',
    align: 'auto',
    right: 140,
    itemGap: 10,
    itemWidth: 16,
    itemHeight: 6,
    textStyle:{
      color: 'rgba(0,0,0,0.65)',
      fontSize: 14
    }
  },
  grid: {
    x: 59,
    x2: 47,
    y: 85,
    y2: 45,
    borderWidth: 0
  },
  xAxis: [{
    type: 'category',
    boundaryGap: true,
    splitLine: {
      show: false
    },
    axisTick: {
      show: true,
      inside: true
    },
    data: []
  }],
  yAxis: [{
    type: 'value',
    axisLabel: {
      showMinLabel: true,
      showMaxLabel: true
    },
    splitArea: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#f0f0f0', // 网格线颜色
        width: 1,         // 网格线宽度
        type: 'solid'     // 网格线类型
      },
      interval: 20         // 设置间距为10
    },
    nameTextStyle: {
      color: ['#333']
    },
    boundaryGap: [0, 0.15]//加上与最大数值的间距
  }],
  lineStyle:{
    color: '#D390D3'
  },
  series: [{
    name: '安全事件趋势',
    type: 'line',
    symbol: 'circle', // 设置拐点为实心圆点
    symbolSize: 6, // 设置实心圆点的大小
    itemStyle: {
      label: {show: true},
      color: '#A344A3'
    },
    data: [],
    areaStyle: {
      color:{
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: '#D390D3' // 0% 处的颜色
        }, {
            offset: 1, color: '#eee' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      }
    }
  }],

});
// 安全事件类型分布
const getTrend = () => {
  let trendParam = {
    frequency: getFrequency(eventLevelTime.value),
    startTime: getSelectTime(eventLevelTime.value),
    endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
    clienttime: {
      clienttime: 0
    }
  }
  req_getTrend(trendParam).then(res => {
    let trendData = res.data
    trendOption.xAxis[0].data = trendData.map(item => {
      return item.timestamp
    });
    trendOption.series[0].data = trendData.map(item => {
      return item.value
    });
    console.log(statisticsOption.xAxis[0].data, statisticsOption.series[0].data)
  })
}
onMounted(() => {
  getStatistics()
  getTrend()
})
</script>
<style lang="scss" scoped>
.pie-box {
  > div {
    background-color: white;
  }
}
</style>